リンクのテクニック（3）
リンクの小技の第3回目は、リンク文字そのものを変化させる方法です。リンクの上にポインタがきたら、文字を太字や斜体にする、文字の色を変える、文字の背景色を変える、といった3種類のテクニックを紹介します。

→ リンクを太字や斜体にする
 
リンクの上にポインタが来たときに、文字を太字にする場合は、Aタグのスタイルシートを「A:hover {font-weight:bold;}」と記述します。先週紹介した「リンクのアンダーラインを表示しない」（text-decoration:none）を併用しておくとよいでしょう。なお、文字を斜体にする場合は、「A:hover {font:italic}」と記述すればOKです。
<HTML>

<TITLE>インフォシーク ホームページ作成</TITLE>

<HEAD>
<STYLE type="text/css">
  <!--
    A:link {text-decoration:none}
    A:visited {text-decoration:none}
    A:active {text-decoration:none}
    A:hover {font-weight:bold}
  -->
</STYLE>
</HEAD>

<BODY>
・<A href="http://www.infoseek.co.jp/">infoseek</A><BR>
・<A href="http://www.rakuten.co.jp/">楽天</A><BR>
・<A href="http://isweb.www.infoseek.co.jp/">isweb</A><BR>
・<A href="http://iswebmag.hp.infoseek.co.jp/">魅せるホームページ作成講座</A>

</BODY>

</HTML>

→ リンクの文字の色を変更する
 
リンクの文字色を変更してしまうのも有効なテクニックです。この指定は、「color」をAタグのスタイルシートに追加すると実現できます。色の指定は、RGBを16進数で指定するのが一般的ですが、「red」など色の名前で指定することもできます。
<HTML>

<TITLE>インフォシーク ホームページ作成</TITLE>

<HEAD>
<STYLE type="text/css">
  <!--
    A:link {text-decoration:none ; color:#0000FF}
    A:visited {text-decoration:none ; color:#0000FF}
    A:active {text-decoration:none ; color:#0000FF}
    A:hover {color:red}
  -->
</STYLE>
</HEAD>

<BODY>
・<A href="http://www.infoseek.co.jp/">infoseek</A><BR>
・<A href="http://www.rakuten.co.jp/">楽天</A><BR>
・<A href="http://isweb.www.infoseek.co.jp/">isweb</A><BR>
・<A href="http://iswebmag.hp.infoseek.co.jp/">魅せるホームページ作成講座</A>
</BODY>

</HTML>


→ リンクの背景色を変更する
 
文字色だけでなく、リンク部分の背景色を変更してしまうのも有効なテクニックです。背景色は、「background」のスタイルシートで指定できます。これまでに紹介したテクニックを組み合わせるだけで、ユニークなリンクを手軽に作成できると思います。いろいろと試してみてください。
<HTML>

<TITLE>魅せるホームページ作成講座</TITLE>

<HEAD>
<STYLE type="text/css">
  <!--
    A:link {text-decoration:none ; color:#000000}
    A:visited {text-decoration:none ; color:#000000}
    A:active {text-decoration:none ; color:#000000}
    A:hover {color:white ; background:gray}
  -->
</STYLE>
</HEAD>

<BODY>
・<A href="http://www.infoseek.co.jp/">infoseek</A><BR>
・<A href="http://www.rakuten.co.jp/">楽天</A><BR>
・<A href="http://isweb.www.infoseek.co.jp/">isweb</A><BR>
・<A href="http://iswebmag.hp.infoseek.co.jp/">魅せるホームページ作成講座</A>
</BODY>

</HTML>


�e�����[�N����EC�i�r Yahoo �y�V LINE���f�[�^�����[�������z500�~�`�I
�����z�[���y�[�W �������N���W�b�g�J�[�h �C�O�i���q�����@�C�O���s�����������I �C�O�z�e��